<template>
    <div>
        <el-main>
            <!-- echartsTop -->
            

            
            <!-- // -->
            <el-row style="">
                <el-col :span="12">
                        <el-card style="width: 500px; height: 300px">
                            <div id="main" style="width: 500px; height: 300px"></div>
                        </el-card>
                       
                
                </el-col>
              <el-col :span="12">
                  <el-card style="width: 500px; height: 300px">
                        <div id="pie" style="width: 500px; height: 300px"></div>
                  </el-card>
                   
         
            </el-col>
            </el-row>
            <!--  -->
            <el-row style="margin-top:40px">
                <el-col :span="12">
                        <el-card style="width: 500px; height: 300px">
                            <div style="width:100px">
                                <el-select @change="handleType" v-model="value" class="m-2" placeholder="Select"  size="default">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    />
                                </el-select>
                            </div>
                            

                            <div id="main1" style="width: 400px; height: 250px;position: relative;
                                left: 65px;
                                top: -16px;"></div>
                             
                        </el-card>
                       
                
                </el-col>
              <el-col :span="12">
                  <el-card style="width: 500px; height: 300px">
                        <div id="pie1" style="width: 500px; height: 300px"></div>
                  </el-card>
                   
         
            </el-col>
            </el-row>

            
        </el-main>
        
    </div>

</template>

<script>
import { mapState } from 'vuex';
import HeadCards from '../components/HeadCards.vue'

export default {
    name:'Home',
    components:{
        HeadCards,
    },
    data(){
        return{
            // 销售额
            // 一到四季度
            // oneS={}
            value:'全部',
            options:[{
                        value: '全部',
                        label: '全部',
                    },
                    {
                        value: '麻将',
                        label: '麻将',
                    },
                    {
                        value: '扑克',
                        label: '扑克',
                    },
                    {
                        value: '象棋',
                        label: '象棋',
                    },
                    ]
        }
    },
    created(){

    },
    mounted(){
        
        //销售量折线
        var chartDom = document.getElementById('main');
        var myChart = this.echarts.init(chartDom);
        //销售量折线
      var option1 = {

            tooltip: {
                trigger: 'item'
            },
          title: {
                text: '各季度总销售额'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['一季度', '二季度', '三季度', '四季度']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: [],
                smooth: true,
                type: 'line',
                areaStyle: {}
                }
            ]
            };
        //通过查询订单接口，通过 结束日期 和 已完成状态 的订单数量  为 销售量，

        //发送请求获取数据
        // 准备JSON
          // 默认商家个人id  订单id查询
            let json = {merchantId:this.mUser.id,id:""}
            this.request.post("/order/getAll/"+"1"+"/"+"50000", JSON.stringify(json)
            ).then(res => {
                if(res.code === 200){
                    let sum = [0,0,0,0]
                    let Price = [0,0,0,0]
                    res.data.records.forEach(item => {
                        //截取月份
                        let t = parseInt(item.endTime.slice(5,7))
                        if( t >= 1 && item.state === "已完成"){
                            if(t <= 3 ){
                            Price[0]+=item.sumPrice
                                sum[0]++
                                return
                            }
                            if(t <= 6 ){
                                Price[1]+=item.sumPrice
                                sum[1]++
                                return
                            }
                            if(t <= 9 ){
                                Price[2]+=item.sumPrice
                                sum[2]++
                                return
                            }
                            if(t <= 12 ){
                                Price[3]+=item.sumPrice
                                sum[3]++
                                return
                            }
                            // //console.log( parseInt(item.endTime.slice(5,7)) );
                        }
                    })

                    //console.log(Price);
                    option1.series[0].data = Price
                    myChart.setOption(option1);
                }

            })


        // 柱状图
        var pieDom = document.getElementById('pie');
        var pieChart = this.echarts.init(pieDom);
       var option2 = {

            tooltip: {
                trigger: 'item'
            },
           title:{
               text:"各季度支付单数"
           },
            xAxis: {
                type: 'category',
                data: ['一季度', '二季度', '三季度', '四季度']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: [],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
                }
            ]
            };
            //发送请求获取数据
        // 准备JSON
          // 默认商家个人id  订单id查询
            let json1 = {merchantId:this.mUser.id,id:""}
            this.request.post("/order/getAll/"+"1"+"/"+"50000", JSON.stringify(json1)
            ).then(res => {
                if(res.code === 200){
                let sum = [0,0,0,0]
                let Price = [0,0,0,0]
                res.data.records.forEach(item => {
                    //截取月份
                    let t = parseInt(item.endTime.slice(5,7))
                    if( t >= 1 && item.state === "已完成"){
                        if(t <= 3 ){
                           Price[0]+=item.sumPrice
                            sum[0]++
                            return
                        }
                        if(t <= 6 ){
                            Price[1]+=item.sumPrice
                            sum[1]++
                            return
                        }
                        if(t <= 9 ){
                            Price[2]+=item.sumPrice
                            sum[2]++
                            return
                        }
                        if(t <= 12 ){
                            Price[3]+=item.sumPrice
                            sum[3]++
                            return
                        }
                        // //console.log( parseInt(item.endTime.slice(5,7)) );
                    }
                })

                option2.series[0].data = sum
                pieChart.setOption(option2)
                }
               

            })


        //
        this.addPie()

        //
        this.addNDGR()
            

    },
    methods:{
        handleType(){
            //
            this.addPie(this.value)

            //

        },
        //南丁格尔图
        addNDGR(){
            //订单状态  图
            var pieDom4 = document.getElementById('pie1');
            var pieChart4 = this.echarts.init(pieDom4);
            var option4= {
                legend: {
                        top: 'bottom'
                    },
                    title: {
                        text: '全部订单状态',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        left: 'center',
                        top: 'bottom',
                        data: [
                        ]
                    },
                    series: [
                        
                        {
                        name: '当前状态数量',
                        type: 'pie',
                        radius: [10, 78],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 4
                        },
                        data: [
                            { value: 40, name: '已完成' },
                            { value: 28, name: '待支付' },
                            { value: 26, name: '消费中' },
                            { value: 26, name: '已取消' },
                            { value: 26, name: '待消费' },
                            { value: 26, name: '已支付' },
                        ]
                        }
                    ]
                    };  
        //

            // 准备JSON
          // 默认商家个人id  订单id查询
            let json4 = {merchantId:this.mUser.id,id:""}
            let orderState = [
                            { value: 0, name: '已完成' },
                            { value: 0, name: '待支付' },
                            { value: 0, name: '消费中' },
                            { value: 0, name: '已取消' },
                            { value: 0, name: '待消费' },
                            { value: 0, name: '已支付' },
                        ]
            this.request.post("/order/getAll/"+"1"+"/"+"50000", JSON.stringify(json4)
            ).then(res => {
                if(res.code === 200){

                    orderState.forEach(item => {
                        res.data.records.forEach(i => {
                            if(item.name === i.state){
                                item.value++
                            }
                        })
                    })

                let o = orderState.sort(((a, b) => a.value < b.value ? 1 : a.value > b.value ? -1 : 0))
                    // //console.log('o',o);
                    option4.series[0].data = o
                    pieChart4.setOption(option4)
                }

            })
        },

        //饼图
        addPie(roomType = ""){
            //条件
            if(roomType === "全部"){
                roomType = ""
            }
            //console.log(roomType);
            // 饼图
         var chartDom3 = document.getElementById('main1');
        var myChart3 = this.echarts.init(chartDom3);
        //销售量折线
        var option3 = {
            
            title:{
                text:"棋牌室使用情况",
                 left: 'center'
                 
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                data: [
                
                ]
            },
            series: [
                {
                name: 'Room_Lock',
                type: 'pie',
                radius: [0, '40%'],
                label: {
                    position: 'inner',
                    fontSize: 12
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 775, name: 'Direct' },
                    { value: 679, name: 'Marketing' }
                ]
                },
                {
                name: 'Room_reservation',
                type: 'pie',
                radius: ['55%', '80%'],
                itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 3
                    },
                // labelLine: {
                //     length: 30
                // },
                
                label: {
                    show:true,
                    fontSize: 12,
                },
                
                data: [
                    { value: 1048, name: 'Baidu' },
                    { value: 335, name: 'Direct' },
                ]
                }
            ]
            };
        //通过查询订单接口，通过 结束日期 和 已完成状态 的订单数量  为 销售量，

        //发送请求获取数据
        // 准备JSON
          // 默认商家个人id  订单id查询
            let json3 = {merchantId:this.mUser.id,id:"",type:roomType,}
            this.request.post("/room/getAll/"+"1"+"/"+"50000", JSON.stringify(json3)
            ).then(res => {
                if(res.code === 200){
                    //console.log('room',res)
                    let reservation = [0,0]
                    let lock = [0,0]
                    res.data.records.forEach(item => {
                        //获取预定状态  和  锁定状态
                        if (item.reservationState === 0) {
                            reservation[0]++
                        }else{
                            reservation[1]++
                        }
                        if (item.lockState === 0) {
                            lock[0]++
                            //console.log(lock[0]);
                        }else{
                            lock[1]++
                        }
                        
                    })

                    //console.log(reservation);
                    //console.log(lock);
                    //
                    let newRes = [
                        {value:reservation[0],name:"未预定"},
                        {value:reservation[1],name:"已预定"}
                        ,]
                    let newLoc = [
                    {value:lock[0],name:"未锁定"}, 
                    {value:lock[1],name:"已锁定"}
                    ,]
                    option3.series[1].data = newRes
                    option3.series[0].data = newLoc
                    myChart3.setOption(option3);

                }
                


            })


        }

    },
    computed:{
        ...mapState("personAbout",["mUser"])
    }

}
</script>

<style>

</style>